<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>退款详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
    <style>
        .head {
        font-size: 16px;
        font-weight: bold;
    }

    .wenzi4 {
        color: #999999;
        margin-left: 15px;
    }

    .goods {
        margin-top: 15px;
    }

    .item {
        display: flex;
        align-items: center;
    }

    .itemimg {
        width: 80px;
        height: 80px;
    }

    .item {
        width: 300px;
    }

    .num {
        flex: 1;
        text-align: right;
    }

    .wenzi1 {
        font-size: 14px;
    }

    .wenzi2 {
        font-size: 13px;
        color: #999999;
    }

    .wenzi3 {
        font-size: 14px;
        font-weight: bold;
        color: #EE5555;
    }
    </style>
</head>

<body>
<div class="layui-fluid box">
    <div class="layui-form" lay-filter="ruleinfo" style="padding: 0px 0px 0 0;">
        <div class="layui-card">
            <div class="layui-card-body box" id="tempdiv">

            </div>
        </div>
    </div>
</div>
<script id="demo" type="text/html">
    <div class="head">退款信息</div>
    <div><text>退款编号：</text><text class="wenzi4" name="RefundNo">{{d.refund.RefundNo}}</text></div>
    <div><text>退款类型：</text><text class="wenzi4" name="RefundType">{{d.refund.RefundTypetxt}}</text></div>
    <div><text>退款状态：</text><text class="wenzi4" name="RefundStatus">{{d.refund.RefundStatustxt}}</text></div>
    {{# if(d.refund.RefundStatus==99){ }}
    <div><text>拒绝原因：</text><text style="color:red;" class="wenzi4" name="AuditMemo">{{d.refund.AuditMemo}}</text></div>
    {{# } }}
    <div><text>退款金额：</text><text class="wenzi4" name="RefundFee">{{d.refund.RefundFee}}</text></div>
    <div><text>备    注：</text><text class="wenzi4" name="RefundMemo">{{d.refund.RefundMemo||""}}</text></div>
    <div id="imgDiv">
        {{#  layui.each(d.refund.imglist, function(index, item){ }}
        <img data-idx="{{index}}" class="itemimg" src="{{item}}" />
        {{#  }) }}
    </div>
    <div class="goods">
        <div class="head">商品信息</div>
        <div id="goodslist">
            {{#  layui.each(d.goodslist, function(index, item){ }}
            <div class="item">
                <div style="width: 80px;text-align: center;">
                    <image class="itemimg" src="{{item.SpecImg}}"></image>
                </div>
                <div style="margin-left: 10px;height: 80px;">
                    <div class="wenzi1">{{ item.GoodsName }}</div>
                    <div class="wenzi2">规格：{{ item.SpecName }}</div>
                    <div class="wenzi3">￥{{ item.GoodsPrice }}</div>
                </div>
                <div class="num">x{{ item.GoodsNum }}</div>
            </div>
            {{#  }) }}
        </div>
    </div>
    <div id="wuliu">
        {{# if(d.logistics.LogisticsNo!=null){ }}
        <div class="head">物流信息</div>
        <div><text>物流公司：</text><text class="wenzi4">{{d.logistics.LogisticsCompany}}</text></div>
        <div><text>物流单号：</text><text class="wenzi4">{{d.logistics.LogisticsNo}}</text></div>
        {{# }  }}
    </div>
</script>
<script>
     layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });
    layui.define(["index", "form", "table", "jquery", "layer", "tree", "element", "laytpl"], function (exports) {
    var layer = layui.layer;
    var admin = layui.admin;
    var $ = layui.$;
    var form = layui.form;
    var laytpl = layui.laytpl;
    var oper = {
        data: {
            model: {},
            sellistinfo: {},
            goodslist: [],
            refundstatus: [],
            //退款状态 0退款中 1审核通过 2确认寄回 3确认收货  4退款成功 99审核拒绝
            refundtype: [],//退款类型 1退款 2退货退款 3全部退款
            type: 0,//0编辑 1详情
        },
        init: function () {
            var self = this;
            self.data.sellistinfo = parent.sellistinfo;
            self.data.sellistinfo.imglist = (self.data.sellistinfo.Imgs || "").split(',').filter(a => { return a != "" });
            self.data.refundstatus = parent.refundstatus;
            self.data.refundtype = parent.refundtype;
            var filter = self.data.refundtype.filter(a => { return a.Code == self.data.sellistinfo.RefundType; });
            if (filter != null && filter.length > 0)
                self.data.sellistinfo.RefundTypetxt = filter[0].Name;

            var filter = self.data.refundstatus.filter(a => { return a.Code == self.data.sellistinfo.RefundStatus; });
            if (filter != null && filter.length > 0)
                self.data.sellistinfo.RefundStatustxt = filter[0].Name;

            self.initdata();
            self.initEvent();
        },
        //获取树结构
        initdata: function () {
            var self = this;
            Promise.all([self.getRefundGoodsList(), self.getLogistics()]).then(res => {
                self.data.goodslist = res[0].data.goodslist;
                var logistics = res[1].data.logistics;
                var getTpl = demo.innerHTML
                    , view = document.getElementById('tempdiv');
                laytpl(getTpl).render({
                    refund: self.data.sellistinfo, goodslist: self.data.goodslist, logistics: logistics
                }, function (html) {
                    view.innerHTML = html;
                });
                $('#tempdiv').on('click', ".itemimg", function (e) {
                    var idx = $(this).data("idx");
                    self.prewImg(idx);
                });
            })
        },
        /***
        * 图片放大
        * */
        prewImg(idx) {
            var joson = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": idx, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式

                ]
            }
            var json = [];
            this.data.sellistinfo.imglist.forEach(a => {
                joson.data.push({ src: a });
            })
            layer.photos({
                photos: joson,// "#imgDiv"
                shadeclose: false,
                closebtn: 2,
                anim: 5
            });
        },
        initSelect: function (data, name) {
            var appendHtml = '';
            appendHtml = "<option value='-1'>全部</option>";
            data.forEach(a => {
                appendHtml += "<option value=" + a.Code + ">" + a.Name + "</option>";
            })
            $("[name=" + name + "]").html(appendHtml);
        },
        //页面加载
        initEvent: function () {
            var self = this;

        },
        /**
         * 查询退款商品信息
         * */
        getRefundGoodsList: function () {
            var self = this;
            return new Promise((resolve, reject) => {
                admin.req({
                    url: self.getbaseurl("Mall.GetRefundGoodsList"),
                    method: "get",
                    data: { refundNo: self.data.sellistinfo.RefundNo },
                    done: res => {
                        if (res.code == 0) {
                            resolve(res);
                        } else {
                            reject(res);
                        }
                    }
                })
            });
        },
        //退款物流
        getLogistics: function () {
            var self = this;
            return new Promise((resolve, reject) => {
                admin.req({
                    url: self.getbaseurl("Mall.GetLogistics"),
                    method: "get",
                    data: { refundNo: self.data.sellistinfo.RefundNo },
                    done: res => {
                        if (res.code == 0) {
                            resolve(res);
                        } else {
                            reject(res);
                        }
                    }
                })
            });
        },
        //获取应用字典
        GetDict: function (classId) {
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: '/common/v1/BasicData/GetAppBaseDict',
                        method: "get",
                        data: {
                            classId: classId,
                            appKey: "APP20200616102057595"
                        },
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20200616102057595/shop/?view=layui&fun=" + fun;
                return url;
            },

    }
    oper.init() 
});
</script>
</body>

</html>
